import alertTemplate from './alert.html'


const Alert = (($) => {
    class Alert {
        constructor() {
            this.boss = $("<div class='ohm-alert'></div>").appendTo("body");
            this.overlay = $("<div class='ohm-alert-overlay'></div>").appendTo(this.boss);
            this.wrapper = $("<div class='ohm-alert-wrapper'></div>").appendTo(this.boss);
            this.btnClear = $("<a class='clear'><svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"40\"><path class='ohm-alert-clear' d=\"M213.333333 554.666667h597.333334v-85.333334H213.333333m-85.333333 256h597.333333v-85.333333H128m170.666667-341.333333v85.333333h597.333333V298.666667\"></path></svg></a>").appendTo(this.wrapper);
            this.alertRecord = {};
            this.childs = [];
            //根据通知的数量来判断显隐状态
            this.overlay.bind("transitionEnd webkitTransitionEnd oTransitionEnd",e=>{
                if(this.childs.length==0){
                    this.boss.removeClass("close").removeClass("open");
                }
            })
            //关闭所有通知
            this.btnClear.click(e=>{
                $.forEach(this.alertRecord,(a,r)=>{
                    this.close(r)
                })
            })
        }
        createTemplate(type, args={}){
            var self = this;
            this.boss.addClass("open")
            args = $.extend(true,{
                header:"温馨提示",
                text: "",
                btnOk: "确定",
                btnCancel: "取消",
                onClose: () => {
                }
            },args)
            //传入参数生成模版
            const uuid = Math.random().toString(16).substring(2);
            var $alert = $(alertTemplate({
                type,
                args
            })).attr("id",uuid).appendTo(this.wrapper);
            //注册事件
            let $alert_header = $alert.find(".header")
            let objX = 0, objY = 0;
            let x = 0, y = 0;
            $alert.find("[close]").click(e=>{
                this.close(uuid,x,y)
                args.onClose($(e.target).attr("close")==="ok")
            });
            $alert_header.bind("touchstart mousedown",e=>{
                //置顶
                e = e.changedTouches ? e.changedTouches[0] : e;
                objX = e.pageX;objY = e.pageY;
                $(window).bind("touchmove mousemove",move)
                $(window).bind("touchend mouseup",end)
                this.wrapper.children().each(function(i){
                    $(this).removeClass("active")
                })
                $alert.addClass("active")
                function move(e) {
                    e.preventDefault();
                    e = e.changedTouches ? e.changedTouches[0] : e;
                    if (objX - e.pageX < 0) {
                        x = x + Math.abs(objX - e.pageX);
                    } else {
                        x = x - Math.abs(objX - e.pageX);
                    }
                    if (objY - e.pageY < 0) {
                        y = y + Math.abs(objY - e.pageY);
                    } else {
                        y = y - Math.abs(objY - e.pageY);
                    }
                    $alert.css({
                        transform:`translateY(${y}px) translateX(${x}px)`,
                        webkitTransform:`translateY(${y}px) translateX(${x}px)`
                    })
                    objX = e.pageX, objY = e.pageY;
                }
                function end() {
                    self.alertRecord[uuid].x = x;
                    self.alertRecord[uuid].y = y;
                    $(window).unbind("touchmove mousemove",move)
                    $(window).unbind("touchend mouseup",end)
                }
            })
            this.alertRecord[uuid] = {
                el:$alert,
                header:$alert_header,
                x,
                y,
            }
            this.childs.push(uuid)
        }
        show(args,callback=()=>{}){
            if($.type(args)=='string'){
                args = {
                    text:args,
                    onClose:callback
                }
            }
            this.createTemplate("alert",args)
        }
        confirm(args,callback=()=>{}){
            if($.type(args)=='string'){
                args = {
                    text:args,
                    onClose:callback
                }
            }
            this.createTemplate("confirm",args)
        }
        close(uuid){
            this.alertRecord[uuid].el.bind("transitionEnd webkitTransitionEnd oTransitionEnd",function (){
                $(this).remove()
            }).addClass("close").css({
                transform:`translateY(${this.alertRecord[uuid].y - 100}px) translateX(${this.alertRecord[uuid].x}px)`,
                webkitTransform:`translateY(${this.alertRecord[uuid].y - 100}px) translateX(${this.alertRecord[uuid].x}px)`,
                opacity:0
            })
            this.childs.remove(uuid)
            //如果删除的是最后一个通知要去掉overlay
            if(this.childs.length==0){
                this.boss.addClass("close")
            }
        }
    }
    $.extend({
        alert:Alert
    })
})($)

export default Alert